<template>
  <div class="dialog">
    <el-dialog title="新建员工" :visible="isDialogShow" @close="addCancel">
      <!-- 表单 -->
      <el-form ref="formData" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="formData.username" style="width:80%" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" style="width:80%" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker v-model="formData.timeOfEntry" style="width:80%" />
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="formData.formOfEmployment" style="width:80%" placeholder="请选择">
            <el-option v-for="item in EmployEnum.hireType" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input v-model="formData.workNumber" style="width:80%" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <el-input v-model="formData.departmentName" style="width:80%" placeholder="请选择部门" @focus="getDepartment" />
          <el-tree v-if="showTree" v-loading="loading" :data="departmentList" :props="{label:'name'}" default-expand-all @node-click="checkTree"	/>
        </el-form-item>
        <el-form-item label="入职时间" prop="correctionTime">
          <el-date-picker v-model="formData.correctionTime" style="width:80%" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center" align="middle">
        <el-col :span="6">
          <el-button size="small" @click="addCancel">取消</el-button>
          <el-button size="small" type="primary" @click="addOk">确定</el-button>
        </el-col>
      </el-row>

    </el-dialog>
  </div>
</template>


<script>
import { getDepartmentsListAPI, addEmployeesListAPI } from '@/api/index'
import { tranListToTreeData } from '@/utils/index'
import EmployEnum from '@/api/constant/employees'
export default {
	name: 'AddEmploy',
	props: {
		isDialogShow: {
			type: Boolean
			// required: true
		}
	},
	data() {
		return {
			EmployEnum,
			formData: {
				username: '', // 姓名
				mobile: '', // 手机号
				formOfEmployment: '', // 聘用形式
				workNumber: '', // 工号
				departmentName: '', // 组织名称
				timeOfEntry: '', // 入职时间
				correctionTime: ''// 转正时间
			},
			// 新增表单的校验规则
			rules: {
				username: [{ required: true, message: '姓名不能为空', trigger: 'blur' },
									{ min: 2, max: 15, message: '字符长度在2-15位之间', trigger: 'blur' }],
				mobile: [{ required: true, message: '电话号码不能为空', trigger: 'blur' },
									{ pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }],
				formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
				workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
				departmentName: [{ required: true, message: '组织名称不能为空', trigger: 'change' }],
				timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }],
				correctionTime: [{ required: true, message: '转正时间不能为空', trigger: 'blur' }]
			},
			departmentList: [], // 声明一个变量，保存部门的数据（组织架构）
			showTree: false, // 声明一个变量，定义部门下面树形架构显示和隐藏，默认隐藏
			loading: false
		}
	},
	methods: {
		// 获取弹出层中，部门框中的 树形结构的数据《《《《《——————————————————————————————————
		async getDepartment() {
			this.loading = true
			const { depts } = await getDepartmentsListAPI()
			this.departmentList = tranListToTreeData(depts, '')
			this.showTree = true
			this.loading = false
		},
		// 点击部门中树形结构的部门名称，填写到部门input中《《《《《——————————————————————————————————
		// el-tree组件自带的点击事件：node-click。接收三个参数：依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
		checkTree(data) {
			this.formData.departmentName = data.name
			this.showTree = false
		},
		// 点击确定按钮，提交表单,新增员工《《《《《——————————————————————————————————
		async addOk() {
			try {
				await	this.$refs.formData.validate(async isOk => {
				await addEmployeesListAPI(this.formData)
				this.$emit('update:isDialogShow', false)
				// this.$parent 指的是父组件的实例。可以直接从父组件中获取任何方法。不需要在this.$emit
				this.$parent.getEmployeesList()
			})
			} catch (err) {
				console.log(err);
			}
		},
		// 点击取消按钮，关闭新增员工弹出层《《《《《——————————————————————————————————
		addCancel() {
			this.formData = {
				username: '',
				mobile: '',
				formOfEmployment: '',
				workNumber: '',
				departmentName: '',
				timeOfEntry: '',
				correctionTime: ''
			}
			this.$refs.formData.resetFields()// 移除之前的校验
			this.$emit('update:isDialogShow', false)
		}
	}
}
</script>

<style scoped>
::v-deep .el-dialog__header{
	background-color: #5daeff !important;
}
::v-deep .el-dialog__title{
	color: #fff !important;
}
::v-deep .el-dialog__close{
	color: #fff !important;
}
</style>